
<!DOCTYPE html>
<html class="html" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>vue-UploadImage4preview</title>
<style type="text/css">
.dis-no{display:none;}
img {
  visibility: hidden;
}
img[src] {
  visibility: visible;
}
img::after {
  content: attr(alt);
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 0.2s;
}
img:hover::after {
  transform: translateY(0);
}
.img-box {
  position: relative;
  overflow: hidden;
}
.img-inline {
  position: relative;
  display: inline-block;
  *display: inline;
  zoom: 1;
  vertical-align: middle;
  max-width: 100%;
  *width: 100%;
  height: auto;
  border: none;
}
.img-center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  max-width: 100%;
  width: auto;
  *width: 100%;
  max-height: 100%;
  height: auto;
  *height: 100%;
  margin: auto;
  border: none;
}
.img-max {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}
.img-cover {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: none;
  width: 100%;
  *width: 100%;
  max-height: none;
  height: 100%;
  *height: 100%;
  margin: auto;
  border: none;
  object-position: 50% 50%;
  object-fit: cover;
}
.box-1b2:before {
  content: '';
  display: block;
  padding-bottom: 200%;
}
.box-2b1:before {
  content: '';
  display: block;
  padding-bottom: 50%;
}
.box-4b3:before {
  content: '';
  display: block;
  padding-bottom: 75%;
}
.box-3b4:before {
  content: '';
  display: block;
  padding-bottom: 133.33333333%;
}
.box-1b1:before {
  content: '';
  display: block;
  padding-bottom: 100%;
}
.box-16b9:before {
  content: '';
  display: block;
  padding-bottom: 56.25%;
}
.box-9b16:before {
  content: '';
  display: block;
  padding-bottom: 177.77777778%;
}
html{height:100%;}
body{height:100%;margin:0;}
#app{
	height:100%;
	position: relative;
}
.abs-left{
	position: absolute;
	left:0;top:0;bottom:0;
	width:216px;
	padding:20px;
	background-color:#aaa;
}
.rel-right{
	margin-left:256px;
}

.test-box{
	margin:20px;
	border:1px solid red;
	padding:20px;
}
.appearBtn-Upload{
	display:inline-block;
	text-align:center;
	line-height:1.5;
	width:128px;
	background-color:antiquewhite;
	cursor: pointer;
}
.appearBtn-Upload input[type="file"]{
	position: absolute;
	top:0;left:0;
	width:1px;height:1px;
	opacity: 0;
}
</style>
<script type="text/javascript" src="../assets/clipboard.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>

<div id="app">
	<div class="abs-left">

		<p>点击选择本地的图片文件</p>
		<p>点击选择画框比例</p>
		<p>点击选择适配方法</p>
		<p>看看哪种效果满足你的需求吧</p>
		

		<form class="form" name="" id="" action="#" method="get" autocomplete="off" enctype="application/x-www-form-urlencoded">
			<fieldset>
				<legend>选择本地的图片</legend>
				<label class="appearBtn-Upload">
					选择文件
					<input type="file" name="" id="" @change="getFile">
				</label>
				<p>{{filePath}}</p>
				<textarea class="dis-no" v-model="file"></textarea>
			</fieldset>
			<!-- <fieldset>
				<legend>画框宽度</legend>
				<input type="number" class="input-text" name="" v-model.number="boxStyle.width" placeholder="" style="width:100px">
			</fieldset> -->
			<fieldset>
				<legend>画框比例</legend>
				<select class="input-select" v-model="bili.checked" name="" id="">
					<option v-for="(v,i) in bili.option" v-bind:value ="v.value">{{v.txt}}</option>
				</select>
			</fieldset>
			<fieldset>
				<legend>适配方法</legend>
				<select class="input-select" v-model="className.checked" name="" id="">
					<option v-for="(v,i) in className.option" v-bind:value ="v.value">{{v.txt}}</option>
				</select>
			</fieldset>
		</form>
		
		<!-- 目前不行<button type="button" @click="getClipboard()">复制base64到剪贴板</button> -->
		2020年8月17写的主体，2021-1-25复制到此，上传gitee备用
	</div>
	<div class="rel-right">
		<div class="test-box">
			<div v-bind:class="boxClass" v-bind:style="boxStyle">
				<img v-bind:class="imgClass" v-bind:src="file" alt="">
			</div>
		</div>
		<div class="test-box">
			<textarea class="" v-model="file"></textarea>
		</div>
	</div>
	
</div>
<script type="text/javascript">
	'use strict';
	var vm = new Vue({
		el:'#app'
		,data:(function(){
			return {
				file:''
				,filePath:''
				// ,imgbox:
				,boxStyle:{width:'256px'}
				,bili:{
					checked:[]
					,option:[
						{'value':'box-1b1','txt':'1:1'}
						,{'value':'box-2b1','txt':'2:1'}
						,{'value':'box-4b3','txt':'4:3'}
						,{'value':'box-16b9','txt':'16:9'}
						,{'value':'box-1b2','txt':'1:2'}
						,{'value':'box-3b4','txt':'4:3'}
						,{'value':'box-9b16','txt':'9:16'}
					]
				}
				,className:{
					checked:[]
					,option:[
						{'value':'img-cover','txt':'填充'}
						// ,{'value':'center','txt':'适应'}
						,{'value':'img-center img-max','txt':'拉伸'}
						,{'value':'img-center','txt':'居中'}
					]
				}
			}
		})
		,computed:{
			'boxClass':function(){return 'img-box '+this.bili.checked;}
			,'imgClass':function(){return this.className.checked;}
			,'base64':function(){}
		}
		,methods:{
			getFile:function(event) {
				var self = this;
				var file = event.target.files[0];
				self.filePath = event.target.value;
				(function(file) {
					var fr = new FileReader();
					fr.onload = function(event){
						self.file = event.target.result
					}
					fr.readAsDataURL(file);
				})(file)
			},
			getClipboard:function(){
				// 目前无用
				console.log(this.file);
			}
		}
	})
</script>
</body>
</html>